<template>
  <div class="release-record">
    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <div class="record-head">
        <div class="head-card head-time">时间</div>
        <div class="head-card head-type">类型</div>
        <div class="head-card head-othe">释放</div>
      </div>
      <div class="record-body" v-for="(i,k) in list" :key="k">
        <div class="body-time">{{i.create_time}}</div>
        <div class="body-type">{{i.remark}}</div>
        <div class="body-othe">{{Number(i.change_type) === 1 ? '+' : '-'}} {{i.change_amount}} AVM</div>
      </div>
    </van-list>
  </div>
</template>
<script setup>
import {ref} from 'vue';
import req from '@/libs/req';

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const pageSize = ref(10);
const pageNum = ref(1);

const onLoad = async () => {
  try {
    loading.value = true;
    const res = await req.post('/Index/accountLog',{
      type_log: 2,
      page_no: pageNum.value,
      page_size: pageSize.value,
      source_type: '280'
    })

    if(pageNum.value === 1){
      list.value.splice(0,list.value.length)
      finished.value = false
    }

    if(res.list.length < pageSize.value){
      finished.value = true
    }else {
      pageNum.value += 1
    }

    list.value.push(...res.list);


    loading.value = false;
  } catch (e) {
    finished.value = true
  }
};
</script>
<style scoped lang="scss">
.release-record {
  min-height: 100vh;
  padding-top: 16px;
  margin: 0 23px;

  .record-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #F7AC15;
  }

  .head-time {
    margin-left: 17px;
  }

  .head-type {
    margin-left: 10px;
  }

  .head-othe {
    margin-right: 7px;
  }

  .record-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #F6F6F6;
    margin-top: 20px;
  }
}
</style>
